<template>
  <div>
    <closeTagButton
      id="closeTagButtonRef"
      style="position: absolute; right: 20px; z-index: 999"
    />
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="项目订单预收款详情" name="A">
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>预收款信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="form" label-width="170px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同名称" style="width: 90%">
                  <el-input
                    v-model="form.contractName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单编号" style="width: 90%">
                  <el-input
                    v-model="form.orderSn"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单名称" style="width: 90%">
                  <el-input
                    v-model="form.orderName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购单位" style="width: 90%">
                  <el-input
                    v-model="form.purchaseDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目所属分公司" style="width: 90%">
                  <el-input
                    v-model="form.projectDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称" style="width: 90%">
                  <el-input
                    v-model="form.projectName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目地址" style="width: 90%">
                  <el-input
                    v-model="form.projectAddress"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产厂家" style="width: 85%">
                  <el-input
                    v-model="form.supplierDeptName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单总量" style="width: 85%">
                  <el-input
                    v-model="form.contractNum"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单总额含税（元）" style="width: 85%">
                  <el-input
                    v-model="form.contractTotalPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预收款截止日期" style="width: 85%">
                  <el-date-picker
                    v-model="form.contractPrePaymentDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder=""
                    disabled
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单预收款" style="width: 85%">
                  <div style="display: flex">
                    <el-input
                      v-model="form.contractPrePaymentRate"
                      placeholder=""
                      clearable
                      disabled
                      style="width: 90%"
                    />
                    <div style="margin-left: 20px">%</div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="预收款金额" style="width: 85%">
                  <el-input
                    v-model="form.contractPrePaymentPrice"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>收据信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="receiptform" label-width="170px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请人" style="width: 90%">
                  <el-input
                    v-model="receiptform.applyUserName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请时间" style="width: 90%">
                  <el-date-picker
                    v-model="receiptform.applyDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="申请说明" style="width: 90%">
                  <el-input
                    v-model="receiptform.applyMark"
                    placeholder=""
                    disabled
                    clearable
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上传人" style="width: 90%">
                  <el-input
                    v-model="receiptform.uploadUserName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上传时间" style="width: 90%">
                  <el-date-picker
                    v-model="receiptform.uploadDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    disabled
                    placeholder=""
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="上传说明" style="width: 90%">
                  <el-input
                    v-model="receiptform.receiptMark"
                    placeholder=""
                    disabled
                    clearable
                    :rows="3"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="附件" style="width: 90%">
                  <el-upload
                    v-model="receiptform.receiptFile"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :before-remove="beforeRemove"
                    :limit="3"
                  >
                    <template #tip>
                      <div class="el-upload__tip" style="width: 50%" />
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card> -->
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>订单预收款</span>
              </div>
            </div>
          </template>
          <vxe-table
            border
            height="300"
            header-align="center"
            :data="CollectionTableData"
            :column-config="{ resizable: true }"
            :row-config="{ isHover: true }"
            size="mini"
            show-overflow
          >
            <vxe-column type="seq" title="序号" width="60" />
            <vxe-column field="receiveDate" title="订单编号" />
            <vxe-column field="receiveType" title="订单名称" />
            <vxe-column field="invoiceNo" title="发起时间" />
            <vxe-column field="receivePrice" title="订单总额(元)" />
            <vxe-column field="contractPrePrice" title="预收款比例" />
            <vxe-column field="orderPrePrice" title="预收金额(元)" />
            <vxe-column field="orderPrePrice" title="预收款截至时间" />
            <vxe-column field="orderPrePrice" title="收款时间" />
            <vxe-column field="orderPrePrice" title="收款金额(元)" />
            <vxe-column field="file" title="发票号码" />
            <vxe-column field="mark" title="发票代码" />
            <vxe-column field="mark" title="开票状态" />
          </vxe-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="订单详情" name="B">
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>基本信息</span>
              </div>
              <div />
            </div>
          </template>
          <el-form :model="orderform" label-width="170px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="销售合同" style="width: 95%">
                  <el-input
                    v-model="orderform.contractName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单编号" style="width: 90%">
                  <el-input
                    v-model="orderform.orderSn"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单名称" style="width: 90%">
                  <el-input
                    v-model="orderform.orderName"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="计划收货时间" style="width: 90%">
                  <el-input
                    v-model="orderform.receivingTime"
                    placeholder=""
                    disabled
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="价格类型" style="width: 90%">
                  <el-radio-group v-model="orderform.priceType" disabled>
                    <el-radio value="0" size="default">锁定</el-radio>
                    <el-radio value="1" size="default">浮动</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="支付说明" style="width: 95%">
                  <el-input
                    v-model="orderform.priceTypeMark"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="基准价" style="width: 85%">
                  <el-input
                    v-model="orderform.basePrice"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="涨幅" style="width: 85%">
                  <el-input
                    v-model="orderform.increasePrice"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="涨幅比率" style="width: 85%">
                  <el-input
                    v-model="orderform.increaseRate"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="当天铜价" style="width: 85%">
                  <el-input
                    v-model="orderform.copperPrice"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="铜价日期" style="width: 85%">
                  <el-date-picker
                    v-model="orderform.copperDate"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder=""
                    disabled
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="修改人" style="width: 85%">
                  <el-input
                    v-model="orderform.copperUpdatePersonName"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" style="width: 95%">
                  <el-input
                    v-model="orderform.orderDesc"
                    placeholder=""
                    clearable
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目部附件" style="width: 90%">
                  <el-upload
                    v-model="orderform.attachFiles"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :before-remove="beforeRemove"
                    :limit="3"
                  >
                    <template #tip>
                      <div class="el-upload__tip" style="width: 50%" />
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="云采附件" style="width: 90%">
                  <el-upload
                    v-model="orderform.supplyConfirmFile"
                    class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :before-remove="beforeRemove"
                    :limit="3"
                  >
                    <template #tip>
                      <div class="el-upload__tip" style="width: 50%" />
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>申请材料</span>
                <div class="header-span">
                  <div class="item">
                    <div
                      class="container"
                      style="
                        background: rgb(67, 94, 194);
                        color: rgb(255, 255, 255);
                      "
                    >
                      蓝色底色
                    </div>
                    <span>复制的材料</span>
                  </div>
                  <div class="item">
                    <div
                      class="container"
                      style="
                        background: rgb(245, 108, 108);
                        color: rgb(255, 255, 255);
                      "
                    >
                      红色底色
                    </div>
                    <span>订购数量大于合同量</span>
                  </div>
                  <div class="item">
                    <!-- <span
                          >提示：双击已订购数量，可查看当前材料的历史下单记录</span
                        > -->
                  </div>
                </div>
              </div>
              <div>
                <el-button
                  type="primary"
                  color="#1E3485"
                  @click="openViewForPurchase()"
                  >预览/下载</el-button
                >
              </div>
            </div>
          </template>
          <el-form label-width="150px">
            <vxe-table
              border
              show-footer
              min-height="300"
              header-align="center"
              :column-config="{ resizable: true }"
              :row-config="{ isHover: true }"
              :data="materiaTableData"
              :row-style="rowStyle"
              size="mini"
              :footer-data="materialTableFooterData"
              :footer-method="footerMethod"
            >
              <vxe-column field="materialCode" title="材料编码" width="120" />
              <vxe-column field="materialName" title="材料名称" width="120" />
              <vxe-column
                field="materialSpecs"
                title="规格"
                width="200"
                show-overflow
              />
              <vxe-column field="materialModel" title="型号" width="120" />
              <vxe-column field="materialUnit" title="单位" width="120" />
              <vxe-column field="materialBrand" title="品牌" width="120" />
              <vxe-column
                field="materialNum"
                title="合同数量"
                fixed="right"
                width="100"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="checkNum"
                title="验收数量"
                fixed="right"
                width="100"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="applyCountNum"
                title="已订购数量"
                fixed="right"
                width="100"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="orderCount"
                title="本次下单数量"
                fixed="right"
                width="100"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="includingTaxUnitPrice"
                title="合同含税单价(元)"
                fixed="right"
                width="120"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="contractIncludingTaxPrice"
                title="本次含税单价(元)"
                fixed="right"
                width="120"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="tax"
                title="税率(%)"
                fixed="right"
                width="80"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="includingTaxTotalPrice"
                title="含税总金额(元)"
                fixed="right"
                width="110"
                show-overflow="ellipsis"
              />
              <vxe-column
                field="materialMark"
                title="备注"
                fixed="right"
                width="110"
                show-overflow="ellipsis"
              />
            </vxe-table>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>收货人</span>
              </div>
            </div>
          </template>
          <el-form label-width="150px">
            <vxe-table
              ref="tableRef"
              border
              :data="consigneeTableData"
              size="mini"
            >
              <vxe-column field="consigneeName" title="姓名" fixed="left" />
              <vxe-column field="consigneePhone" title="手机号" fixed="left" />
            </vxe-table>
          </el-form>
        </el-card>
        <el-card shadow="never" style="margin-top: 1%">
          <template #header>
            <div style="display: flex; justify-content: space-between">
              <div class="card-header">
                <div
                  style="
                    width: 4px;
                    height: 20px;
                    background-color: #409eff;
                    margin-right: 5px;
                  "
                />
                <span>供应商确认</span>
              </div>
            </div>
          </template>
          <el-form label-width="150px">
            <vxe-table
              ref="tableRef"
              border
              :data="Confirmationrecord"
              size="mini"
            >
              <vxe-column field="status" title="状态" width="100" />
              <vxe-column field="createdAt" title="确认时间" width="300" />
              <vxe-column field="mark" title="确认说明" />
              <vxe-column field="file" title="附件" />
            </vxe-table>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹窗组件 -->
    <div class="dialogs">
      <filePreview
        :visible="filePreviewVisible"
        :fileId="fileId"
        :fileType="fileType"
        @close="closeFilePreview"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import closeTagButton from "@/components/closeTagButton.vue";
import { VxePagerEvents, VxeTablePropTypes } from "vxe-table";
import { useRoute } from "vue-router";

import filePreview from "@/components/filePreview2.vue";

import {
  getprepaymentfindByIdInfo,
  getreceiptdetail,
  getpaymenthistorypageList
} from "@/api/ERP_PaymentMange";

import {
  getprojectOrderinfo,
  getmateriallist,
  getmaterialstatistics,
  getconsigneelist,
  projectOrdersaveOrUpdate,
  deletematerial,
  deleteconsignee,
  postsubmitapproval,
  historylist,
  getOrderSnAndName
} from "@/api/ERP_OrderManage";
import { getNodePayFormData, getProjectReceiver } from "@/api/ERP_sales";
import { headers, uploadUrl, getDictDetail } from "@/api/utils";

// 接收路由传参
const route = useRoute();
const queryParams = route.query;
// 预览弹窗
let filePreviewVisible = ref(false);
let fileId = ref("");
let fileType = ref("");
let fileUrl = ref("");

const activeName = ref("A");
let form = ref({
  id: undefined,
  contractId: "",
  contractNo: "",
  contractName: "",
  orderSn: "",
  orderName: "",
  purchaseDeptName: "",
  projectDeptName: "",
  supplierDeptName: "",
  projectName: "",
  projectAddress: "",
  orderTotalPrice: "",
  orderTotalRealPrice: "",
  paymentDeadlineDate: "",
  orderPrePaymentRate: "",
  orderPrePaymentPrice: "",
  purchaseApplyId: "",
  contractNum: "",
  contractTotalPrice: "",
  contractPrePaymentDate: "",
  contractPrePaymentRate: "",
  contractPrePaymentPrice: ""
});
const receiptform = ref({
  id: undefined,
  applyUserName: "",
  applyDate: "",
  applyMark: "",
  uploadUserName: "",
  uploadDate: "",
  receiptMark: "",
  receiptFile: ""
});
const orderform = reactive({
  attachFiles: [],
  attachFiless: "", // 上传文件
  auditStatus: "",
  auditStatusName: "",
  basePrice: "",
  contractId: "",
  contractMethod: "",
  contractName: "",
  contractNo: "",
  copperCoefficient: "",
  copperDate: "",
  copperPrice: "",
  copperUpdatePersonId: "",
  copperUpdatePersonName: "",
  createDept: "",
  createdAt: "",
  createdBy: "",
  deploymentId: "",
  flowSubmitDate: "",
  id: "",
  increasePrice: "",
  increaseRate: "",
  isDeleted: "",
  modelSchemeInfoId: "",
  notaxTotalPrice: "",
  orderDesc: "",
  orderName: "",
  orderNum: "",
  orderProcess: "",
  orderSn: "",
  orderStatus: "",
  priceType: "",
  priceTypeMark: "",
  processInstanceId: "",
  processVersion: "",
  projectConfirmFile: "",
  projectDeptId: "",
  projectDeptName: "",
  projectFolwableStatus: "",
  projectFolwableStatusName: "",
  projectId: "",
  projectInvoiceStatus: "",
  projectName: "",
  projectReconciliationStatus: "",
  purchaseContractId: "",
  purchaseContractName: "",
  purchaseContractTaxTotalPrice: "",
  purchaseDeptId: "",
  purchaseDeptName: "",
  receivingTime: "",
  saleDeptId: "",
  saleDeptName: "",
  settlementStatus: "",
  shipmentAt: "",
  shipmentAttachs: "",
  shipmentDesc: "",
  shipmentFiles: "",
  shipmentUserId: "",
  shipmentUserName: "",
  status: "",
  statusName: "",
  supplierId: "",
  supplierName: "",
  supplierReconciliationStatus: "",
  supplyConfirmDate: "",
  supplyConfirmFile: "",
  supplyInvoiceStatus: "",
  supplyStatus: 0,
  supplyStatusName: "",
  takeAt: "",
  takeAttachs: "",
  takeDesc: "",
  takeFiles: "",
  takeUserId: "",
  takeUserName: "",
  taxTotalPrice: "",
  tenantId: "",
  updatedAt: "",
  updatedBy: ""
});

const CollectionTableData = ref([]);
const consigneeTableData = ref([]);
const Confirmationrecord = ref([]);

// 非新增不许删除
const beforeRemove = (uploadFile, uploadFiles) => {
  ElMessage.error("当前状态文件不可删除");
  return false;
};

let procureNodePayTableData = ref([]);
const procureNodePayTableColumns = reactive([
  {
    field: "nodeType",
    title: "节点类型",
    width: 150,
    align: "center",
    formatter({ cellValue, row }) {
      if (cellValue == "0") return "合同预收款";
      else if (cellValue == "1") return "订单预收款";
      else if (cellValue == "2") return "订单实收款";
      else return cellValue;
    }
  },
  {
    field: "payTime",
    title: "收款节点时间",
    width: 500
  },
  {
    field: "backPayRate",
    title: "完成收款比例（%）",
    width: 200
  },
  {
    field: "nodeMark",
    title: "节点说明",
    width: 400
  }
]);

// 表格数据
const materiaTableData = ref([]);
let materialTableFooterData = ref<VxeTablePropTypes.FooterData>([]);

//单元格样式
const rowStyle = ({ row, rowIndex }) => {
  if (row && row.orderCount) {
    let applyCountNum = Number(
      row.applyCountNum == undefined ? 0 : row.applyCountNum
    );
    let orderCount = Number(row.orderCount == undefined ? 0 : row.orderCount);
    let materialNum = Number(
      row.materialNum == undefined ? 0 : row.materialNum
    );
    let sum = 0;
    for (let i in materiaTableData.value) {
      if (materiaTableData.value[i].materialCode === row.materialCode) {
        sum += Number(materiaTableData.value[i].orderCount);
      }
    }
    if (applyCountNum + sum > materialNum) {
      if (row.isCopy == 0) {
        return {
          backgroundColor: "#f56c6c",
          color: "#ffffff"
        };
      }
    }
  }
  if (row && row.materialCode) {
    const tbas = materiaTableData.value.map(item => item.materialCode);
    const tbaCount = tbas.filter(
      materialCode => materialCode === row.materialCode
    ).length;
    if (tbaCount > 1) {
      if (row.isCopy == 1) {
        return { backgroundColor: "#435ec2", color: "#ffffff" };
      }
    }
  }
};

// 材料表格预览
function openViewForPurchase() {
  fileId.value = queryParams.id as string;
  fileType.value = "projectOrder";
  filePreviewVisible.value = true;
}
function closeFilePreview(val: boolean) {
  filePreviewVisible.value = val;
}

//合计行
function footerMethod({ columns, data }) {
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return "合计";
      }
      if ([].includes(column.field)) {
        return sumNum(materiaTableData.value, column.field);
      }
      return null;
    })
  ];
}
const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    if (item[field]) {
      count += Number(item[field]);
    }
  });
  return count;
};

async function getinfo() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  const response: ApiResponse = await getprepaymentfindByIdInfo(params);
  if (response.code === 200 && response.data) {
    form.value = response.data;
    getorderinfo();
  }
  const response2: ApiResponse = await getreceiptdetail(params);
  if (response2.code === 200 && response2.data) {
    receiptform.value = response2.data;
  }
  let param: ApiParams = {};
  param.contractId = form.value.contractId;
  const response3: ApiResponse = await getpaymenthistorypageList(param);
  if (response3.code === 200 && response3.data) {
    CollectionTableData.value = response3.data.records;
  }
}

// 获取项目订单详情
const getorderinfo = async () => {
  const all = await getprojectOrderinfo({
    id: form.value.purchaseApplyId
  }).then((response: any) => {
    orderform.id = form.value.purchaseApplyId;
    orderform.contractName = response.data.contractName;
    orderform.contractId = response.data.contractId;
    orderform.contractMethod = response.data.contractMethod;
    orderform.orderSn = response.data.orderSn;
    orderform.orderName = response.data.orderName;
    orderform.receivingTime = response.data.receivingTime;
    orderform.priceType = response.data.priceType;
    orderform.priceTypeMark = response.data.priceTypeMark;
    orderform.orderDesc = response.data.orderDesc;
    // form.attachFiles = response.data.attachFiles;
    orderform.basePrice = response.data.basePrice;
    orderform.increasePrice = response.data.increasePrice;
    orderform.increaseRate = response.data.increaseRate;
    orderform.copperPrice = response.data.copperPrice;
    orderform.copperDate = response.data.copperDate;
    orderform.copperUpdatePersonName = response.data.copperUpdatePersonName;
    orderform.processInstanceId = response.data.processInstanceId;
    if (response.data.attachFiles) {
      //orderform.attachFiless.length = 0;
      orderform.attachFiless = response.data.attachFiles;
      JSON.parse(response.data.attachFiles).forEach(file => {
        orderform.attachFiles.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
    }
    // 获取订单列表
    let params: any = {};
    params.pageIndex = 1;
    params.pageSize = 999;
    params.id = form.value.purchaseApplyId;
    getmateriallist(params).then((response: any) => {
      if (response.data) {
        materiaTableData.value = response.data.records.map(item => {
          return {
            ...item,
            oldOrderCount: item.orderCount
          };
        });
        // 获取材料列表统计数据
        getmaterialstatistics({
          id: form.value.purchaseApplyId
        }).then((response: any) => {
          if (response.data) {
            materialTableFooterData.value = [];
            materialTableFooterData.value.push({
              includingTaxTotalPrice: response.data.includingTaxTotalPrice,
              orderCount: response.data.orderCount,
              materialNum: response.data.contractCount
            });
          }
        });
      }
    });
    // 获取订单列表
    getconsigneelist(params).then((response: any) => {
      if (response.data) {
        consigneeTableData.value = response.data.records;
      }
    });
    // 获取订单列表
    let paramsB: any = {};
    paramsB.bizId = form.value.purchaseApplyId;
    paramsB.type = 0;
    // 获取供应商确认
    historylist(paramsB).then((response: any) => {
      if (response.data) {
        if (response.file) {
          const jsonObject = JSON.parse(response.file);
          jsonObject.forEach(item => {
            response.file = item.name;
          });
        }
        if (response.createdAt) {
          const date = new Date(response.createdAt);
          response.createdAt =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        if (response.status == "0") {
          response.status = "";
        } else if (response.status == "1") {
          response.status = "";
        } else if (response.status == "2") {
          response.status = "";
        } else if (response.status == "3") {
          response.status = "通过";
        }
        Confirmationrecord.value = response.data.records;
      }
    });
  });
};

onMounted(() => {
  getinfo();
});
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
}
.header-span {
  display: flex;
  align-items: center;
}
.item {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 12px;
}
.container {
  height: 20px;
  width: 80px;
  text-align: center;
  border: 1px solid #eee;
  line-height: 20px;
  font-size: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.examine {
  display: grid;
  place-items: center;
  img {
    height: 15vh;
  }
}
::v-deep .el-tabs .el-tabs__item.is-active {
  background-color: #fff !important;
}
</style>
